<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commonjsp/jstl.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>服务员（用户）管理</title>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link rel="stylesheet" type="text/css" href="${prefix}/stylesheets/theme.css">
<link rel="stylesheet" type="text/css" href="${prefix}/stylesheets/reveal.css">
<link rel="stylesheet" type="text/css" href="${prefix}/lib/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="${prefix}/lib/bootstrap/css/bootstrap.css">

<script src="${prefix}/lib/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="${prefix}/lib/ajaxfileupload.js" type="text/javascript"></script>
<script src="${prefix}/lib/jquery-form.js" type="text/javascript"></script>
<script src="${prefix}/lib/jquery.reveal.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
	//=====页面准备好以后，查询该操作者可以进行操作的店面和公司信息
	queryCompanyAndStoreSelect();
	
	//当店面选择发生变化时
	$("#companyandstoreid").change(function() {
		$("#search_username").val("");
		$("#search_worknumber").val("");
		$("#search_realname").val("");
		preQueryuserByStoreid();
	});
	
	//当“创建员工”页面的“用户名”窗口的内容改变时，查询这个用户名是否已经被使用了
	$("#userName_craete").focusout(function() {
		var username = $("#userName_craete").val();
		$.ajax({
			type: "post",
			async: true,
			url: "${prefix}/storeuser/exsitStoreuser?userName=" + encodeURI(username),
			success: function(data) {
				var jsonData = eval('(' + data + ')');
				//错误信息
				if(jsonData.responsecode != "E200") {
					alert(jsonData.errorinfo);
					return;
				}
				
				//如果返回的是true，那么代表有了这个用户名
				if(jsonData.data) {
					$("#userName_errordiv").html("该用户已经被使用了，请重新输入！");
					$("#userName_errordiv").css("display","");
					$("#repeatusername_create").val("true");
				} else {
					$("#userName_errordiv").html("");
					$("#userName_errordiv").css("display","none");
					$("#repeatusername_create").val("false");
				}
			}
		});
	});
});

//查询该操作者可以进行操作的店面和公司信息
function queryCompanyAndStoreSelect() {
	$.ajax({
		type: "post", 
		async: false, 
		url: "${prefix}/company/queryCompanyAndStoreList", 
		success: function(data) { 
			var jsonData = eval('(' + data + ')');
			var listDatas = jsonData.data;
			var optionhtml = ""; 
			for(var index = 0 ; listDatas != null && index < listDatas.length ; index++) { 
				var optionItem = listDatas[index]; 
				
				optionhtml += "<optgroup id=\"" + optionItem.companyuid + "\" label=\"" + optionItem.companyName + "\" style=\"color: #FF00FF;margin: 2px\"></optgroup>";
				var stores = optionItem.stores;
				for(var sum = 0 ; stores != null && sum < stores.length ; sum++) {
					var storeItem = stores[sum];
					optionhtml += "<option style=\"margin: 5px\" companyid=\"" + optionItem.companyuid + "\" value=\"" + storeItem.storeuid + "\"";
					if(index == 0 && sum == 0) {
						optionhtml += " selected ";
					}
					optionhtml += ">" + storeItem.storeName + "</option>";
				}
			}
			
			$("#companyandstoreid").html(optionhtml);
			preQueryuserByStoreid();
		}
	});
}

//查询指定的店面的用户信息 ，不论用户状态怎样
function preQueryuserByStoreid() {
	storeid = $("#companyandstoreid").val();
	//可能的用户名、工号、真实信息名等信息
	data = "storeid=" + storeid;
	var username = $.trim($("#search_username").val());
	var worknumber = $.trim($("#search_worknumber").val());
	var realname = $.trim($("#search_realname").val());
	if(username != ""){
		data += "&userName=" + username;
	}
	if(worknumber != ""){
		data += "&workNumber=" + worknumber;
	}
	if(realname != ""){
		data += "&realName=" + realname;
	}
	$.ajax({
		type: "post",
		async: true,
		url: "${prefix}/storeuser/queryStoreuserByStoreid",
		data: data,
		success: function(data) {
			var jsonData = eval('(' + data + ')');
			//错误信息
			if(jsonData.responsecode != "E200") {
				alert(jsonData.errorinfo);
				return;
			}
			
			reviewTables(jsonData.data);
		}
	});
}

//当收到表格数据后，由这个方法进行表格重绘
function reviewTables(jsonobjects) {
	$("#usertablebodyDiv").html("");
	var htmlbody = "";
	for(var index = 0 ; jsonobjects != null && index < jsonobjects.length ; index++) {
		var userItem = jsonobjects[index];
		htmlbody += "<tr>";
		htmlbody += "<td>" + userItem.userName + "</td>";
		htmlbody += "<td>" + userItem.workNumber + "</td>";
		htmlbody += "<td>" + userItem.joinTime + "</td>";
		//分组信息
		htmlbody += "<td>";
		var groups = userItem.groups;
		for(var groupindex = 0 ; groups != null && groupindex < groups.length ; groupindex++) {
			var groupItem = groups[groupindex];
			if(groupindex != 0) {
				htmlbody += "<br/>";
			} 
			htmlbody += groupItem.groupName;
		}
		htmlbody += "</td>";
		//状态
		if(userItem.status == 1) { 
			htmlbody += "<td align=\"center\">正常</td>";
		} else { 
			htmlbody += "<td align=\"center\" style=\"color:#FF0000\">禁用</td>";
		} 
		htmlbody += "<td align=\"center\">";
		htmlbody += "<a href=\"javascript:void(0);\" onclick=\"perUserGroup('" + userItem.uid + "','" + userItem.userName + "')\" style=\"margin-right: 10px\" data-reveal-id=\"myUserGroupDiv\">用户组</a>";
		htmlbody += "<a href=\"javascript:void(0);\" onclick=\"preModifyPassword('" + userItem.uid + "','" + userItem.userName + "')\" style=\"margin-right: 10px\" data-reveal-id=\"myUserPasswordDiv\">修改密码</a>";
		if(userItem.status == 1) {
			htmlbody += "<a href=\"javascript:void(0);\" onclick=\"modifyUserStatus('" + userItem.uid + "')\" style=\"margin-right: 10px\">禁用</a>";
		} else { 
			htmlbody += "<a href=\"javascript:void(0);\" onclick=\"modifyUserStatus('" + userItem.uid + "')\" style=\"margin-right: 10px\">启用</a>";
		}
		htmlbody += "</tr>";
	}
	
	$("#usertablebodyDiv").html(htmlbody);
}

//展示创建员工时的页面(初始化)
function perCreateUser() {
	$("#repeatusername_create").val("false");
	$("#realName_craete").val("");
	$("#workNumber_craete").val("");
	$("#userName_craete").val("");
	$("#password_craete").val("");
	$("#repassword_craete").val("");	
}

//创建员工
function createUser() {
	var repeatusername = $("#repeatusername_create").val();
	var realName = $.trim($("#realName_craete").val());
	var workNumber = $.trim($("#workNumber_craete").val());
	var userName = $.trim($("#userName_craete").val());
	var password = $("#password_craete").val();
	var repassword = $("#repassword_craete").val();	
	
	//=======首先验证填写的内容
	var goodForm = true;
	var error = "";
	if(realName == "") {
		goodForm = false;
		error += "请填写员工真实姓名！<br>";
	}
	if(workNumber == "") {
		goodForm = false;
		error += "请填写员工工号！<br>";
	}
	//========查询员工号是否被使用
	storeid = $("#companyandstoreid").val();
	$.ajax({
		type: "post",
		async: false, 
		url: "${prefix}/storeuser/exsitStoreuserByWorkNumber?storeid=" + storeid + "&workNumber=" + workNumber, 
		success: function(data) {
			var jsonData = eval('(' + data + ')');
			//错误信息
			if(jsonData.responsecode != "E200") {
				goodForm = false;
				error += jsonData.errorinfo;
				return;
			}
			
			if(jsonData.data) {
				goodForm = false;
				error += "这个员工工号已被使用，请检查<br>";
			}
		}
	});
	//用户名信息
	if(userName == "") {
		goodForm = false;
		error += "用户名必须填写！<br>";
	}
	if(password == "") {
		goodForm = false;
		error += "密码信息必须填写！<br>";
	}
	if(repassword == "") {
		goodForm = false;
		error += "请再填写一次密码！<br>";
	}
	if(password != repassword) {
		goodForm = false;
		error += "您两次输入的密码不正确，请检查！<br>";
	}
	if(repeatusername == "true") {
		goodForm = false;
		error += "您输入的用户名已被使用（可能是其他公司使用），请更换！<br>";
	}
	
	if(!goodForm) {
		alert(error);
		return;
	}
	
	//======组织数据，准备提交
	var storeid = $("#companyandstoreid").val();
	var data = encodeURI("realName=" + realName + "&workNumber=" + workNumber + "&userName=" + userName + "&password=" + password + "&storeid=" + storeid);
	$.ajax({
		type: "post",
		async: true, 
		url: "${prefix}/storeuser/createStoreUser", 
		data: data,
		success: function(data) {
			var jsonData = eval('(' + data + ')');
			//错误信息
			if(jsonData.responsecode != "E200") {
				alert(jsonData.errorinfo);
				return;
			}
			
			//重新查询列表
			preQueryuserByStoreid();
			
			//重新整理表单
			perCreateUser();
			
			alert("添加成功个，您可以继续添加，也可以退出该对话框!");
		}
	});
}

//初始化指定用户的用户组的分配界面
function perUserGroup(userid , userName) {
	var useredGroups = null;
	var ableGroups = null;
	$("#showUsername").html("人员 ：" + userName + ",用户组编辑");
	$("#selected_userid").val(userid);
	//首先查询当前用户已经属于哪些用户组
	$.ajax({
		type: "post",
		async: false, 
		url: "${prefix}/storeuser/queryStroegroupByUserid?userid=" + userid, 
		success: function(data) {
			var jsonData = eval('(' + data + ')');
			//错误信息
			if(jsonData.responsecode != "E200") {
				alert(jsonData.errorinfo);
				return;
			}
			
			useredGroups = jsonData.data;
			var html = "";
			for(var sum = 0 ; useredGroups != null && sum < useredGroups.length ; sum++) {
				var userdGroup = useredGroups[sum];
				html += "<option value=\"" + userdGroup.uid + "\">" + userdGroup.groupName + "</option>";
			}
			
			$("#userdStoreGroups").html(html);
		}
	});
	
	//然后在查询哪些用户组还可以被加入
	companyid = $("#companyandstoreid").find("option:selected").attr('companyid');
	$.ajax({
		type: "post",
		async: true,
		url: "${prefix}/storeuser/queryStoregroupByCompanyid?companyid=" + companyid,
		success: function(data) {
			var jsonData = eval('(' + data + ')');
			//错误信息
			if(jsonData.responsecode != "E200") {
				alert(jsonData.errorinfo);
				return;
			}
			
			//可用的信息
			var html = "";
			ableGroups = jsonData.data;
			for(var index = 0 ; index < ableGroups.length ; index++) {
				var ableGroup = ableGroups[index];
				var canadd = true;
				for(var sum = 0 ; useredGroups != null && sum < useredGroups.length ; sum++) {
					var userdGroup = useredGroups[sum];
					//说明这个用户组，这个指定的用户已经加入了
					if(ableGroup.uid ==  userdGroup.uid) {
						canadd = false;
						break;
					}
				}
				
				if(canadd) {
					html += "<option value=\"" + ableGroup.uid + "\">" + ableGroup.groupName + "</option>";
				}
			}
			
			$("#ableStoreGroups").html(html);
		}
	});
}

//点击按钮，将用户添加到选定的用户组中
function appendtoGroups() {
	var selectedGroupids = $("#ableStoreGroups").val();
	if(selectedGroupids == null || selectedGroupids.length == 0) {
		alert("请至少选择一个用户组！");
		return;
	}
	
	//同步调用ajax接口，接口成功后，在进行页面表现的操作
	var userid = $("#selected_userid").val();
	var data = "userid=" + userid;
	for(var  index = 0 ; index < selectedGroupids.length ; index++) {
		data += "&groupids=" + selectedGroupids[index];
	}
	
	$.ajax({
		type: "post",
		async: false,
		url: "${prefix}/storeuser/bindUsergroupMapping",
		data: data,
		success: function(data) {
			var jsonData = eval('(' + data + ')');
			//错误信息
			if(jsonData.responsecode != "E200") {
				alert(jsonData.errorinfo);
				return;
			}
			
			//只有服务器端操作成功后，才进行页面上信息的操作
			var selectedOptions = $("#ableStoreGroups option:selected");
			$("#userdStoreGroups").append(selectedOptions);
			
			//重新查询列表
			preQueryuserByStoreid();
		}
	});
}

//点击按钮，将用户移除选定的用户组中
function removetoGroups() {
	var selectedGroupids = $("#userdStoreGroups").val();
	if(selectedGroupids == null || selectedGroupids.length == 0) {
		alert("请至少选择一个用户组！");
		return;
	}
	
	//同步调用ajax接口，接口成功后，在进行页面表现的操作
	var userid = $("#selected_userid").val();
	var data = "userid=" + userid;
	for(var  index = 0 ; index < selectedGroupids.length ; index++) {
		data += "&groupids=" + selectedGroupids[index];
	}
	
	$.ajax({
		type: "post",
		async: false,
		url: "${prefix}/storeuser/unbindUsergroupMapping",
		data: data,
		success: function(data) {
			var jsonData = eval('(' + data + ')');
			//错误信息
			if(jsonData.responsecode != "E200") {
				alert(jsonData.errorinfo);
				return;
			}
			
			//只有服务器端操作成功后，才进行页面上信息的操作
			var selectedOptions = $("#userdStoreGroups option:selected");
			$("#ableStoreGroups").append(selectedOptions);
			
			//重新查询列表
			preQueryuserByStoreid();
		}
	});
}

//对指定用户进行密码修改前的数据准备
function preModifyPassword(userid , username) {
	$("#selected_userid_password").val(userid);
	$("#showUsername_password").html("人员：" + username + " 进行密码修改 ");
	$("#password_modify").val();
	$("#repassword_modify").val();
}

//进行指定用户的密码修改
function updateUserPassword() {
	var password = $("#password_modify").val();
	var repassword = $("#repassword_modify").val();
	
	//=======首先验证填写的内容
	var goodForm = true;
	var error = "";
	if(password == "") {
		goodForm = false;
		error += "密码信息必须填写！<br>";
	}
	if(repassword == "") {
		goodForm = false;
		error += "请再填写一次密码！<br>";
	}
	if(password != repassword) {
		goodForm = false;
		error += "您两次输入的密码不正确，请检查！<br>";
	}
	if(!goodForm) {
		alert(error);
		return;
	}
	
	//=======请求ajax进行修改
	var data = "userid=" + $("#selected_userid_password").val() + "&password=" + password;
	$.ajax({
		type: "post",
		async: false,
		url: "${prefix}/storeuser/modifyUserPassword",
		data: data,
		success: function(data) {
			var jsonData = eval('(' + data + ')');
			//错误信息
			if(jsonData.responsecode != "E200") {
				alert(jsonData.errorinfo);
				return;
			}
			
			alert("密码修改成功，您可以继续修改，也可以关闭该对话框");
		}
	});
}

//修改指定用户的状态。
function modifyUserStatus(userid) {
	$.ajax({
		type: "post",
		async: true, 
		url: "${prefix}/storeuser/modifyUserStatus?userid=" + userid, 
		success: function(data) {
			var jsonData = eval('(' + data + ')');
			//错误信息
			if(jsonData.responsecode != "E200") {
				alert(jsonData.errorinfo);
				return;
			}
			
			//重新查询列表
			preQueryuserByStoreid();
		}
	});
}
</script>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
	<script src="${prefix}/javascripts/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="${prefix}/lib/font-awesome/docs/assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="${prefix}/lib/font-awesome/docs/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="${prefix}/lib/font-awesome/docs//assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="${prefix}/lib/font-awesome/docs//assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="${prefix}/lib/font-awesome/docs//assets/ico/apple-touch-icon-57-precomposed.png">
</head>

<!--[if lt IE 7 ]> <body class="ie ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> 
<body>
<!--<![endif]-->

<div class="navbar">
	<%@ include file="/commonjsp/userbar.jsp"%>
</div>

<div class="container-fluid">
	<div class="row-fluid">
		<%@ include file="/commonjsp/mainmenu.jsp"%>
		<!-- 列表 -->
		<div class="span9">
			<!-- 列表头 -->
			<h1 class="page-title">门店服务员</h1>
			
			<!-- 店面列表 -->
			<div class="well" style="width: 160px;height: 480px; float: left; margin-right:10px ; padding: 10px">
				<input type="hidden" name="admin_name" id="admin_name" value="${admin.userName }"/>
				<input type="hidden" name="admin_level" id="admin_level" value="${admin.adminLevel }"/>
				<input type="hidden" name="admin_companyid" id="admin_companyid" value="${admin.company.uid }"/>
				<input type="hidden" name="admin_storeid" id="admin_storeid" value="${admin.storefront.uid }"/>
				<select style="width: 100% ; height: 100% ; border: 0px" multiple="multiple" id="companyandstoreid" name="companyandstoreid">
					
				</select>
			</div>
			
			<div class="well" style="float: left; min-width: 900px; margin-bottom: 5px ; padding-bottom: 10px">
				<label><b>筛选：</b></label> 
				<label style="float: left; padding-right: 10px">用户名：<input type="text" id="search_username" value="" style="width: 160px; height: 30px"/></label>
				<label style="float: left; padding-right: 10px">工号：<input type="text" id="search_worknumber" value="" style="width: 160px; height: 30px"/></label>
				<label style="float: left; padding-right: 10px">真实姓名：<input type="text" id="search_realname" value="" style="width: 160px; height: 30px"/></label>
				<label style="float: left; padding-right: 10px">
					<a href="javascript:void(0);"  id="searchbutton" onclick="preQueryuserByStoreid()" class="btn "><i class="icon-save"></i> Search</a>
					<a href="javascript:void(0);"  onclick="perCreateUser()" id="createUserbutton" class="btn btn-primary" data-reveal-id="craeteUserDiv"> 创 建 </a>
				</label>
			</div>
			
			<!-- 列表正文 -->
			<div class="well" style="float: left; min-width: 900px; margin-top: 5px">
				<table class="table">
					<thead>
						<tr>
							<th>用户名</th>
							<th>工号</th>
							<th>创建时间</th>
							<th>用户组</th>
							<th>状态</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="usertablebodyDiv">
						
					</tbody>
				</table>
			</div>
		</div>
	</div>
	
	<!-- Le javascript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="${prefix}/lib/bootstrap/js/bootstrap.js"></script>
	
	<!-- 用户组绑定 -->
	<div id="myUserGroupDiv" class="reveal-modal" style="width: 600px;height: 360px; overflow-x: hidden; overflow-y: hidden">
		<input type="hidden" id="selected_userid" value=""/>
		<font color="#999999" id="showUsername"></font><br/>
		<div style="width: 250px ; height: 70% ; margin: 20px; border-color: #EEEE00 ; float: left;">
			<div style="float: left;">
			<label>可选择的分组：</label>
			<select multiple="multiple" style="width: 250px;height: 100%" id="ableStoreGroups"></select>
			</div>
			<label><a href="javascript:void(0);" onclick="appendtoGroups()" class="btn">加入到用户组</a></label>
		</div> 
		<div style="width: 250px ; height: 70% ; margin: 20px ; border-color: #EEEE00 ; float: left;">
			<div style="float: left;">
			<label>已选择的分组：</label> 
			<select multiple="multiple" style="width: 250px;height: 100%" id="userdStoreGroups"></select>
			</div>
			<label><a href="javascript:void(0);"  onclick="removetoGroups()" class="btn">从选定的用户组移除</a></label>
		</div>
		<a class="close-reveal-modal">×</a>
	</div>
	
	<!-- 用户创建/编辑页面 -->
	<div id="craeteUserDiv" class="reveal-modal" style="width: 280px;height: 420px;">
		<input type="hidden" id="repeatusername_create" name="repeatusername_create" value="false"/>
		<label style="padding: 5px;margin: 0px;">真实姓名：</label>
		<label style="padding: 5px;margin: 0px;">
			<input type="text" id="realName_craete" style="width: 180px ; height: 30px ; padding: 0px ; margin: 0px;" maxlength="40"/>
			<font style="color:#FF0000"> * </font>
		</label>
		<label style="padding: 5px;margin: 0px;">员工号：</label>
		<label style="padding: 5px;margin: 0px;">
			<input type="text" id="workNumber_craete" style="width: 180px ; height: 30px ; padding: 0px ; margin: 0px;" maxlength="20"/>
			<font style="color:#FF0000"> * </font>
		</label>
		<label style="padding: 5px;margin: 0px;">登录名：</label>
		<label style="padding: 5px;margin: 0px;">
			<input type="text" id="userName_craete" style="width: 180px ; height: 30px ; padding: 0px ; margin: 0px;" maxlength="40"/>
			<font style="color:#FF0000"> * </font>
		</label>
		<label style="padding: 5px;margin: 0px; color: #FF0000;display: none" id="userName_errordiv"></label>
		<label style="padding: 5px;margin: 0px;">请输入初始密码：</label>
		<label style="padding: 5px;margin: 0px;">
			<input type="password" id="password_craete" style="width: 180px ; height: 30px ; padding: 0px ; margin: 0px;"/>
			<font style="color:#FF0000"> * </font>
		</label>
		<label style="padding: 5px;margin: 0px;">请再输入一次：</label>
		<label style="padding: 5px;margin: 0px;">
			<input type="password" id="repassword_craete" style="width: 180px ; height: 30px ; padding: 0px ; margin: 0px;"/>
			<font style="color:#FF0000"> * </font>
		</label>
		<label style="padding: 5px;margin: 0px;">
			<a href="javascript:void(0);" onclick="createUser()" id="craeteUserButton" class="btn btn-primary"><i class="icon-save"></i> Save </a>
		</label>
		<a class="close-reveal-modal">×</a>
	</div>
	
	<!-- 修改密码 -->
	<div id="myUserPasswordDiv" class="reveal-modal" style="width: 210px;height: 210px;">
		<input type="hidden" id="selected_userid_password" value=""/>
		<font color="#999999" style="padding: 5px ;margin: 0px;" id="showUsername_password"></font><br/>
		<label style="padding: 5px;margin: 0px;">输入新的密码：</label>
		<label style="padding: 5px;margin: 0px;">
			<input type="password" id="password_modify" style="width: 180px ; height: 30px ; padding: 0px ; margin: 0px;"/>
		</label>
		<label style="padding: 5px;margin: 0px;">请在输入一次：</label>
		<label style="padding: 5px;margin: 0px;">
			<input type="password" id="repassword_modify" style="width: 180px ; height: 30px ; padding: 0px ; margin: 0px;"/>
		</label>
		<label style="padding: 5px;margin: 0px;">
			<button id="updateUserPasswordButton" onclick="updateUserPassword()" class="btn btn-primary"><i class="icon-save"></i> 修改密码 </button>
		</label>
		<a class="close-reveal-modal">×</a>
	</div>
</div>
</body>
</html>